.fl {
  display: flex;
}

.clearfix::after {
  display: block;
  width: 0;
  height: 0;
  clear: both;
  visibility: hidden;
  content: '.';
}

.wrapper {
  padding: 0 .5em;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: currentColor;
  overflow: hidden;
}

.second-title {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  & span:nth-child(1) {
    font: 400 18px/50px 'Microsoft Yahei';
    color: #5b5c5e;
  }
  & span:nth-child(2) {
    color: #9c9ba3;
  }
}

.default {
  background: #f7f7f7;
}

.night {
  background: #000;
  color: #646464;
}

.creamy-white {
  background: #f8f3dd;
}

.bean-green {
  background: #c2dfcd;
}

.light-pink {
  background: #f6dad9;
}

.dark {
  background: #262a2d;
}

.night {
  color: rgba($color: #fff, $alpha: .5);
  background: #1a1a1a;
}

.tag {
	padding: .2em .7em;
	color: #fff;
	border-radius: .1em;
	margin-bottom: .6em;
	font-size: 1.4em;
	margin-left: .4em;
}

.tag:nth-child(1n) {
	background: burlywood;
}

.tag:nth-child(2n) {
	background: cadetblue;
}

.tag:nth-child(3n) {
	background: coral;
}

.tag:nth-child(4n) {
	background: cornflowerblue;
}
